﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "物料流转";
    Layout = null;
}
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<div class="layui-card">
    <div class="layui-card-header">物料流转占比-生产领料</div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div id="pieChart" style="width: 100%; height: 400px;"></div>
            </div>
            <div class="layui-col-md4">
                <div id="barChart" style="width: 100%; height: 400px;"></div>
            </div>
            <div class="layui-col-md4">
                <div id="lineChart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery'], function(){
        var $ = layui.jquery;
        
        // 初始化图表
        var pieChart = echarts.init(document.getElementById('pieChart'));
        var barChart = echarts.init(document.getElementById('barChart'));
        var lineChart = echarts.init(document.getElementById('lineChart'));
        
        // 数据
        var materialData = [
            { name: '测试', value: 1613, percentage: '94.38%' },
            { name: 'PE - 20*30*40', value: 75, percentage: '4.39%' },
            { name: 'PP - 50*50*50', value: 11, percentage: '0.64%' },
            { name: '瓶盖 - R10.PG-01', value: 10, percentage: '0.59%' }
        ];
        
        // 饼图配置
        var pieOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                top: 10,
                data: materialData.map(item => item.name)
            },
            series: [{
                name: '物料流转占比',
                type: 'pie',
                radius: '70%',
                center: ['50%', '60%'],
                data: materialData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    formatter: '{b}: {c} ({d}%)'
                }
            }]
        };
        
        // 柱状图配置
        var barOption = {
            title: {
                text: '物料流转占比-生产领料',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: materialData.map(item => item.name),
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
                name: '生产领料'
            },
            series: [{
                data: materialData.map(item => item.value),
                type: 'bar',
                itemStyle: {
                    color: function(params) {
                        var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666'];
                        return colors[params.dataIndex];
                    }
                }
            }]
        };
        
        // 折线图配置
        var lineOption = {
            title: {
                text: '物料流转占比-生产领料',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: materialData.map(item => item.name),
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
                name: '生产领料'
            },
            series: [{
                data: materialData.map(item => item.value),
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: '#73c0de'
                },
                lineStyle: {
                    color: '#73c0de',
                    width: 2
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(115,192,222,0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(115,192,222,0.1)'
                    }])
                }
            }]
        };
        
        // 渲染图表
        pieChart.setOption(pieOption);
        barChart.setOption(barOption);
        lineChart.setOption(lineOption);
        
        // 窗口大小改变时，重置图表大小
        window.addEventListener('resize', function() {
            pieChart.resize();
            barChart.resize();
            lineChart.resize();
        });
    });
</script>

